<template>
  <div>
    <!-- 
        vue自定义指令

        vue中除了我们平常见过的v-if,v-shou之外Vue也允许设置自定义指令,对普通DOM元素进行底层操作这就会用到自定义指令

        一个指令定义对象可以提供如下几个钩子函数 (均为可选)
        inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
        bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以
        通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)
        componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
        unbind：只调用一次，指令与元素解绑时调用

        指令钩子函数会被传入以下参数
        el：指令所绑定的元素，可以用来直接操作 DOM 
        binding：一个对象，包含以下属性
        name：指令名，不包括 v- 前缀
        value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2
        oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
        expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1
        arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”
        modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
        vnode： Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情

    -->
    <ul
      v-nav-current="{
        className: 'nav-item',
      }"
    >
      <li class="nav-item" v-for="(item, index) in items" :key="index">
        {{ item }}        
      </li>
    </ul>
    <span v-color="color" v-text="name" v-big="n"></span>
    <button @click="n++">点击n++</button>
    <input type="text" v-fbind="n" />
    <input type="text" />
    <p @click="dianji">拖拽</p>
    {{n}}
  </div>
</template>
<style scoped>
p{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #000;
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
ul {
  width: 100%;
  overflow: hidden;
}
.nav-item {
  float: left;
  width: 25%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  list-style: none;
}
</style>
<script>
import navCurrent from "@/directives/navCurrent";
import Vue from "vue";
/* 全局指令fbind */
Vue.directive("fbind", {
  /* 元素成功绑定时 */
  bind(el, binding) {
    el.value = binding.value;
  },
  /* 元素被插入页面是 */
  inserted(el, binding) {
       console.log("in");
    el.focus();
  },
  /* 指令所在模板被重新解析时 */
  update(el, binding) {
    el.value = binding.value;
  },
});
// Vue.directive("focus", {
//   /* 元素成功绑定时 */
//   bind(el, binding) {},
//   /* 元素被插入页面是 */
//   inserted(el, binding) {},
//   /* 指令所在模板被重新解析时 */
//   update(el, binding) {
//     el.value = binding.value;
//   },
// });
Vue.directive("num", {
  /* 元素成功绑定时 */
  bind(el, binding) {},
  /* 元素被插入页面是 */
  inserted(el, binding) {
    el.oninput = function () {
      if (isNaN(el.value) != true) {
        console.log(el.value);
      } else {
        el.value = el.value.slice(0, -1);
      }
      console.log(el.value);
    };
  },
  
  /* 指令所在模板被重新解析时 */
  update(el, binding) {},
});
export default {
  directives: {
    navCurrent,
    test: {
      inserted: function (el, binding) {
        // 指令的定义
        console.log(binding); //一个对象，包含很多属性属性
      },
      bind: function (el, binding, vnode) {
        el.innerHTML = binding.value;
      },
    },
    color: {
      bind: function (el, binding, vnode) {
        el.style.color = binding.value;
      },
    },
    big(a, b) {
      /* 
        写法完整事件"big"function()
        1.指令与元素成功绑定时会被调用
        2.指令所在的模板被重新解析时会调用
        指令语法就是给dom元素改变内容
        不靠返回值
        第一个值是绑定我们这个事件的真实元素
        第二个中有一个valuee,value中的值是我们后面的n
        其中this指向window
        */
      a.innerText = b.value * 10;
    },
  },
  data() {
    return {
      curIdx: 0,
      items: ["选项一", "选项二", "选项三", "选项四"],
      name: "我是名字",
      color: "red",
      fontsize: 40,
      n: 1,
      value: "",
    };
  },
  methods:{
    add(){
      window.console.log(123)
    },
    dianji(){
      console.log("in");
    }
  }
};
</script>

